<template>
	<div class="login">
		<div class="stepA" v-if="!isStep2">
			<h2 class='title'>输入老师号</h2>
			<p class='tip'>输入老师的号码加入班级</p>
			<group class='group'>
				<x-input  title="老师给的号码 :"  :required='true'  ref='teacherNum' autofocus="autofocus" placeholder=""
				 @on-change="changeStepA" v-model="teacherNum" ></x-input>
			</group>

			<x-button class='button' :disabled='isDisabled' @click.native='isStep2=true' type="primary">下一步</x-button>
			<p class='tip right'>没有老师号</p>
		</div>
		<div class="stepB" v-if="isStep2">
			<h2 class='title'>Welcome</h2>
			<p class='tip'>一起作业,开启快乐的学习之旅</p>
			<group class='group'>
				<x-input title="手机号或学号 :" ref='user' type="number" :required='true' autofocus="autofocus" @on-change="changeStepB"
				 v-model="user" :min="3" :max="11"></x-input>
				<x-input title="登录密码 :" ref='pass' type="password" :required='true' @on-change="changeStepB" v-model="pass" :min="3"
				 :max="11"></x-input>
			</group>

			<x-button  class='button' type="primary" :disabled='isLoginDisabled' @click.native='login'>登录</x-button>
			<p class="tip"><span class="left"><input id='remember' class="checkbox" type="checkbox" /> <label for="remember">记住密码</label></span> <span class="right" @click='toForget'>忘记密码</span></p>
			<p class="bottom" @click='toRegister'>还没账号?点此注册</p>
			<div class="return" @click="goBack">
				<img src="../assets/return.png" alt="">
			</div>
		</div>
	</div>
</template>
<script>
	import {
		XInput,
		Group,
		XButton,
		Radio
	} from 'vux'

	export default {
		components: {
			XInput,
			Group,
			XButton,
			Radio
		},
		data() {
			return {
				teacherNum: '',
				user: '',
				pass: '',
				isDisabled: true, //老师号验证是否通过
				isLoginDisabled: true, //用户名与密码是否验证通过
				isStep2: false, //是否为登录页面
			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			changeStepA(val) {
				var isValid = this.$refs.teacherNum.valid;
				this.isDisabled = isValid ? false : true;
			},
			changeStepB(val) {
				var isUserValid = this.$refs.user.valid;
				var isPassValid = this.$refs.pass.valid;
				var isVaild = isUserValid && isPassValid;
				this.isLoginDisabled = isVaild ? false : true;
				console.log(val)
			},
			toRegister() {
				this.$router.push({
					path: '/register'
				})
			},
			toForget(){
				this.$router.push({
					path: '/forget'
				})
			},
			goBack() {
				this.$router.back();
			},
			login() {
				console.log("登录")
				this.$router.push({
					path: '/home'
				})


			}
		},


	}
</script>

<style lang="less" scoped="scoped">
	.login {
		width: 100%;
		height: 100%;
	

		// 		background: url(../assets/login.jpg) no-repeat;
		// 		background-size: 100% 100%;
		overflow: hidden;
		text-align: center;

		.stepA,
		.stepB {
			width: 100%;
			height: 100%;
			position: relative;

		}

		.title {
			font-weight: normal;
			padding-top: 50px;
			font-size: 24px;
		}

		.tip {
			color: grey;
			font-size: 12px;
			padding-top: 5px;
			position: relative;

			.left {
				position: absolute;
				left: 10px;
			}

			.right {
				position: absolute;
				right: 10px;
			}
		}

		.bottom {
			width: 100%;
			position: absolute;
			bottom: 0px;
			text-align: center;
			color: rgb(24,144,255);
		}

		.group {
			margin-bottom: 20px;
		}

		.right {
			text-align: right;
			margin-right: 10px;
		}

		.checkbox {
			vertical-align: sub;
		}

		.return {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 10px;
			left: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
